<template>
	<div class="personnelAdd">
		<div class="header_ContentBox pl_10 pr_10">
			<i class="lhadmin lhadmin-renzheng Icon"></i>
			<span class="pl_10 pr_10">/</span>
			<span class="header_text">调度中心 / 修改需求</span>
		</div>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">修改用工需求</h4>
			</div>
			<div class="pt_10">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>店铺名称</div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input"
							v-model="shop_name"
							:fetch-suggestions="querySearch"
							placeholder="店铺名称"
							:trigger-on-focus="true"
							@select="handleSelect"
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>岗位</div>
					<div class="fl list-cont">
						<el-select v-model="type_arr" placeholder="请选择" @change="changeBtndialogtype">
							<el-option
								v-for="item in demandList"
								:key="item.id"
								:label="item.label_name"
								:value="`${item.label_id}|${item.label_name}|${item.price_b}|${item.price_c}`"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">需求备注</div>
					<div class="fl list-cont">
						<el-input type="textarea" :rows="8" :cols="44" placeholder="请输入内容" v-model="remark"></el-input>
					</div>
				</div>
				<div class="row-info clear p_ratios">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>商户单价</div>
					<div class="fl list-cont">
						<el-input v-model="price_b"></el-input>
					</div>
					<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px;">元/小时</div>
				</div>
				<div class="row-info clear p_ratios">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>劳动者单价</div>
					<div class="fl list-cont">
						<el-input v-model="price_c"></el-input>
					</div>
					<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px;">元/小时</div>
				</div>
				<div class="row-info clear p_ratios">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>需要人数</div>
					<div class="fl list-cont">
						<el-input v-model="neednum"></el-input>
					</div>
				</div>
				<div class="row-info clear p_ratio_num">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>计划用工时长</div>
					<div class="fl list-cont">
						<el-input-number v-model="timelong" :step="0.5" :min="2" step-strictly></el-input-number>
					</div>
					<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px;">（每次加减0.5）</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>工作地址</div>
					<div class="fl list-cont">
						<el-input v-model="address"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>用工日期</div>
					<div class="fl list-cont contentInfo">
						<el-form label-width="100" class="demo-ruleForm fl">
							<el-form-item required style="margin-bottom: 0px;">
								<el-col :span="11">
									<el-date-picker
										type="date"
										value-format="yyyy-MM-dd"
										placeholder="开始日期"
										:picker-options="pickerOptions0"
										v-model="start_time"
										style="width: 100%;"
									></el-date-picker>
								</el-col>
								<el-col class="line" :span="2" style="position: relative; right: -10px;">~</el-col>
								<el-col :span="11">
									<el-date-picker
										type="date"
										value-format="yyyy-MM-dd"
										placeholder="结束日期"
										:picker-options="pickerOptions0"
										v-model="end_time"
										style="width: 100%;"
									></el-date-picker>
								</el-col>
							</el-form-item>
						</el-form>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>开工时间</div>
					<div class="fl list-cont">
						<el-time-select
							v-model="kg_start_time"
							:picker-options="{
								start: '00:00',
								step: '00:30',
								end: '24:00'
							}"
							placeholder="开始时间"
						></el-time-select>
					</div>
				</div>
			</div>
			<div class="ml_110 mt_80">
				<span class="btnOK" @click="submitBtn(1)" v-if="id == ''">创建并发布</span>
				<span class="btnOK" @click="submitBtn(2)" v-if="id != ''">修改并发布</span>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
export default {
	name: 'MerchantsEdit',
	data() {
		return {
			id: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			cityList: [], //城市列表
			// 城市相关信息
			city_arr: '',
			city_id: '',
			city_name: '',
			city_sn: '',
			selects: [],
			// 区域信息
			area_id: '',
			area_name: '',
			//店铺列表
			shopList: [],
			//店铺id
			shop_id: '',
			//店铺名
			shop_name: '',
			//任务标签列表
			type_arr: [],
			//标签名称
			label_name: '',
			// 标签id
			label_id: '',
			//需求备注
			remark: '',
			//商户单价
			price_b: '',
			//劳动者单间
			price_c: '',
			// 需要人数
			neednum: '',
			//计划用工时长
			timelong: '',
			// 工作地址
			address: '',
			address2: '',
			// 用工开始时间
			start_time: '',
			// 用工结束时间
			end_time: '',
			//开工时间
			kg_start_time: '',
			demandList: [],
			// 设置只能选择当前日期及之后的日期
			pickerOptions0: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
				}
			}
		}
	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id //接收传参
		}
		// 查询相关相情信息
	},
	mounted() {
		this.getcityList()
		//店铺列表
		// let fn = new FormData()
		// this.$http.post(this.url + '/shop/list', fn).then(
		// 	res => {
		// 		if (res.data.msg == '查询成功' || res.data.code == '200') {
		// 			if (res.data.data != null) {
		// 				res.data.data.list.forEach(item => {
		// 					item.value = item.name
		// 				})
		// 				this.shopList = res.data.data.list
		// 				this.total = res.data.data.count
		// 			} else {
		// 				this.shopList = []
		// 				this.total = 0
		// 			}
		// 		} else if (res.data.code == '8886') {
		// 			//code   8886  登录过期
		// 			sessionStorage.clear()
		// 			this.$alert('登录已过期，请重新登录 !', '提示', {
		// 				confirmButtonText: '确定',
		// 				callback: action => {
		// 					window.location = 'login.html'
		// 				}
		// 			})
		// 			return
		// 		} else {
		// 			this.$message.error(res.data.msg)
		// 			return
		// 		}
		// 	},
		// 	res => {
		// 		this.$message.error('网络错误！')
		// 		return
		// 	}
		// )
		let fn = new FormData()
		fn.append('sign_status', 30) //已合作的店铺
		fn.append('status', 1) //启用的店铺
		// fn.append("search_list", 1); //不进行分页
		this.$http.post(this.url + '/shop/getListForSearch', fn).then(
			res => {
				// console.log(res.data.data);
				if (res.data.msg == '查询成功' || res.data.code == '200') {
					if (res.data.data != null) {
						res.data.data.list.forEach(item => {
							item.value = item.name
						})
						this.shopList = res.data.data.list
						this.total = res.data.data.count
					} else {
						this.shopList = []
						this.total = 0
					}
				} else if (res.data.code == '8886') {
					//code   8886  登录过期
					sessionStorage.clear()
					this.$alert('登录已过期，请重新登录 !', '提示', {
						confirmButtonText: '确定',
						callback: action => {
							window.location = 'login.html'
						}
					})
					return
				} else {
					this.$message.error(res.data.msg)
					return
				}
			},
			res => {
				this.$message.error('网络错误！')
				return
			}
		)
	},
	methods: {
		submitBtn(e) {
			// 新增以及修改的接口
			if (
				this.shop_name == '' ||
				this.label_name == '' ||
				this.label_id == '' ||
				this.price_b == '' ||
				this.price_c == '' ||
				this.neednum == '' ||
				this.timelong == '' ||
				this.address == '' ||
				this.start_time == '' ||
				this.end_time == '' ||
				this.kg_start_time == ''
			) {
				this.$message.error('请填写必填项')
				return
			}
			let fn = new FormData()
			if (e == 2) {
				fn.append('id', this.id)
			}
			fn.append('shop_id', this.shop_id)
			fn.append('label_id', this.label_id)
			fn.append('label_name', this.label_name)
			fn.append('info', this.remark)
			fn.append('price_b', this.price_b)
			fn.append('price_c', this.price_c)
			fn.append('person_num', this.neednum)
			fn.append('hours', this.timelong)
			fn.append('address', this.address2)
			fn.append('area_id', this.area_id)
			fn.append('city_id', this.city_id)
			fn.append('start_date', this.start_time)
			fn.append('end_date', this.end_time)
			// fn.append('start_time',this.kg_start_time);
			fn.append('start_time', common.getConvertTime(this.kg_start_time))
			fn.append('business_id', this.business_id)
			fn.append('industry', 1)

			this.$http.post(this.url + '/demand/save', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '操作成功！' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.back()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		getcityList() {
			//获取城市列表
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialog() {
			let [id, name, code] = this.city_arr.split('|') // es6 数组解构赋值
			this.city_id = id.toString()
			this.city_name = name.toString()
			this.city_sn = code.toString()
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.shop_id = item.id
			this.demandList = []
			this.label_id = ''
			this.label_name = ''
			this.area_id = item.area_id
			this.area_name = item.area_name
			this.city_id = item.city_id
			this.city_name = item.city_name
			this.address = '[' + item.area_name + ']' + item.address
			this.address2 = item.address
			this.business_id = item.business_id
			//获取店铺相关计价规则-岗位
			let fn = new FormData()
			fn.append('shop_id', item.id)
			fn.append('status', 1) //只查看启用的

			this.$http.post(this.url + '/rule/priceList', fn).then(
				res => {
					console.log(res.data.data)
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							// this.type_arr = JSON.stringify(res.data.data.list);
							//
							this.demandList = res.data.data.list
							this.changeBtndialogtype()
						} else {
							this.demandList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialogtype() {
			let [id, name, price_b, price_c] = this.type_arr.split('|') // es6 数组解构赋值
			this.label_id = id
			this.label_name = name
			this.price_b = price_b
			this.price_c = price_c
		}
	},
	filters: {}
}
</script>

<style scoped>
.personnelAdd {
	margin: 15px 15px 0 15px;
}
.row-info {
	padding: 10px 0;
}
.resetBtn,
.btnOK {
	padding: 0 30px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}
</style>



// WEBPACK FOOTER //
// src/components/roledemand/Edit.vue